<script setup>
import AMapLoader from "@amap/amap-jsapi-loader";

import {onBeforeMount, reactive} from "vue";

window._AMapSecurityConfig = {
  securityJsCode: "7e1e8d4e654736c8ce0e404f840eae58",
};
let aMap = reactive(null);
let map = reactive(null);
onBeforeMount(() => {
  AMapLoader.load({
    key: "fc1eb0ea4870fa4d8d014f5e26e103d8",  // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0",    // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [
      "AMap.Scale",
      "AMap.ToolBar",
      "AMap.HawkEye",
      "AMap.ControlBar",
      "AMap.Geolocation",
      "AMap.PlaceSearch",
      "AMap.AutoComplete",
    ] //指定控件
  }).then(AMap => {
    aMap = AMap;
    map = new AMap.Map("map-container", {
      zoom: 16,
      // 瑞豹自行车南京南站
      center: [118.80039212134238, 31.961418963562963]
      // 石家庄
      // center: [114.644091, 37.935773]
    })
    // 比例尺控件
    map.addControl(new AMap.Scale());
    // 缩放控件
    map.addControl(new AMap.ToolBar({
      visible: true,
      position: {
        top: '110px',
        right: '40px'
      }
    }));
    // 罗盘指南针控件
    map.addControl(new AMap.ControlBar({
      visible: true,
      position: {
        top: '10px',
        right: '10px'
      }
    }));
    // 鹰眼控件
    map.addControl(new AMap.HawkEye());
    // 定位控件
    map.addControl(new AMap.Geolocation({
      position: {
        top: '180px',
        right: '40px'
      }
    }))
    let autoOptions = {
      // 可选参数，你的搜索输入框dom的id(多数场景下只需要这一个参数即可)
      input: 'keyword',
      // 可选参数，你的搜索输出框dom的id，用来展示提示的结果（默认的只有图里的文字，如果需要图片等，需要指定output）
      // output: 'your_out_put_id',
      // 是否强制指定城市,设定city后有效
      // citylimit: false,
      // 输入提示时限定城市。可选值：城市名（中文或中文全拼）、citycode、adcode；默认值：“全国”
      // city: '北京',
      // 默认为true，表示是否在input位于页面较下方的时候自动将输入面板显示在input上方以避免被遮挡
      outPutDirAuto: true,
      // ···其他参数请翻阅文档
    };
    const autoComplete = new AMap.AutoComplete(autoOptions);

    const placeSearch = new AMap.PlaceSearch({
      map: map,
      type: '', // 数据类别
      pageIndex: 1,
      pageSize: 10,
    });

    // 注册监听，当选中某条记录时会触发
    autoComplete.on('select', select);

    function select(e) {
      // 获取到检索提示信息后，根据提示信息搜索精确地理位置
      // 设置查询城市（防止查提示信息所在城市之外的城市）
      placeSearch.setCity(e.poi.adcode);
      // 检索地理信息
      placeSearch.search(e.poi.name, function (status, result) {
        // 获取查询到的结果
        if (status === 'complete') {
          // 精确地理信息为多条，placeSearch会将地理位置全部添加为地图Marker，如果需要触发点击时获取指定Marker的地理信息，可以添加markerClick事件
          console.log(result.poiList.pois);

          placeSearch.on('markerClick', function (e) {
            // e.data中即为poi信息（=result.poiList.pois[i])
            console.log(e.data)
            // 当前点击的地图的marker
            console.log(e.marker)
          })
        }
      });
    }
  }).catch(e => {
    console.error(e);
  })
})
</script>

<template>
  <div class="view-container">
    <div id="map-container"></div>
    <div style="position: absolute; top: 80px; left: 32px">
      <!-- 用来触发输入提示插件的容器 -->
      <input type="text" id="keyword" style="width: 300px; height: 32px; padding-left: 10px" placeholder="请输入地址"/>
    </div>
  </div>
</template>

<style scoped>
#map-container {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 80vh;
}

/* 移动端适配 */
@media (max-width: 768px) {
  #map-container {
    height: 70vh;
  }
  
  #keyword {
    width: 250px !important;
    height: 28px !important;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  #map-container {
    height: 60vh;
  }
  
  #keyword {
    width: 200px !important;
    height: 24px !important;
    font-size: 12px;
    top: 60px !important;
    left: 16px !important;
  }
}
</style>